<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 800px;
            margin: auto;
        }

        #d1>li{
            width: 80px;
            height: 300px;
            border: 1px solid #ffffff;
            background: lightpink;
        }
        #ss,.fs{
            padding: 30px 0;
        }
        #fs{

            padding: 0 10px 0 0;
        }
        div>span{
            height: 40px;
            line-height: 40px;
        }
        .sh{
            padding:0 10px ;
            color: #66c2cc;
            border: 1px solid #66c2cc;

        }
        .div>ul>li{
            width: 218px;
            height: 180px;
            background: #daedff none repeat scroll 0 0;
            border: 1px solid #fff;
            float: left;
            overflow: hidden;
            padding: 15px;
        }
        .div ul li i{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-image: url(tai_03.png);
            background-repeat: no-repeat;
            margin-top: 15px;

        }
        .div ul li em {
            color: #1570a6;
            display: inline-block;
            font-size: 13px;
            width: 82px;
        }
        .div ul li span {
            color: #187db6;
            display: inline-block;
            font-size: 20px;
            float: right;
            padding-top: 20px;
            width: 100px;
        }
        .div ul li p {
            float: right;
            color: #818181;
            font-size: 13px;
            width: 129px;
        }
        #d1 ul{
            overflow: hidden;
        }
        #d1 ul li{
            float: left;
            width:90px;
            height: 130px;
            margin: 0 10px;
            background:#9DD8F6;
            list-style: none;
            color: #716b6b;
        }
        #d1 ul li .sa{
            height: 50px;
            line-height: 20px;
        }
        #d1 ul li .sb{
            height: 50px;
            line-height: 20px;
        }
        #d1 ul li .sc{
            height: 50px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<input type="text" id="ipt" placeholder="请输入相关城市名称">
<div>城市：<span id="city1"></span></div>
<div>天气：<span id="now"></span></div>
<div>风向：<span id="wond"></span></div>
<div class="fs">
    <span id="fs"><em>分时段预报</em></span>
</div>
<div id="d1">
    <ul>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
        <li><p class="sa"></p><p class="sb"></p><p class="sc"></p></li>
    </ul>
</div>
<div id="ss">
    <p><span class="sh"><em>生活指数</em></span></p>
</div>
<div class="div">
    <ul>
        <li class="li1">
            <i></i>
            <span class="sd"></span>
            <em>紫外线指数</em>
            <p class="ad">建议穿长袖衬衫单裤等服装。</p>
        </li>
        <li class="li2">
            <i></i>
            <span  class="se"></span>
            <em>运动</em>
            <p class="ae">建议穿长袖衬衫单裤等服装。</p>
        </li>
        <li class="li5">
            <i></i>
            <span class="sf"></span>
            <em>感冒指数</em>
            <p class="af">建议穿长袖衬衫单裤等服装。</p>
        </li>
        <li class="li3">
            <i></i>
            <span class="sg"></span>
            <em>穿衣指数</em>
            <p class="ag">建议穿长袖衬衫单裤等服装。</p>
        </li>
        <li class="li4">
            <i></i>
            <span class="sh1"></span>
            <em>洗车指数</em>
            <p class="ah">建议穿长袖衬衫单裤等服装。</p>
        </li>
        <li class="li6">
            <i></i>
            <span class="sj"></span>
            <em>空气污染扩散指数</em>
            <p class="aj">建议穿长袖衬衫单裤等服装。</p>
        </li>
    </ul>
</div>
<script>
    var city = "沧州";
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = JSON.parse(xmlhttp.responseText);
                console.log(json)
                document.querySelector("#city1").innerHTML=json.basic.city;
                document.querySelector("#now").innerHTML=json.now.cond.txt;
                document.querySelector("#wond").innerHTML=json.now.wind.dir;
                document.querySelector(".sd").innerHTML=json.suggestion.uv.brf;
                document.querySelector(".ad").innerHTML=json.suggestion.uv.txt;
                document.querySelector(".se").innerHTML=json.suggestion.sport.brf;
                document.querySelector(".ae").innerHTML=json.suggestion.sport.txt;
                document.querySelector(".sf").innerHTML=json.suggestion.flu.brf;
                document.querySelector(".af").innerHTML=json.suggestion.flu.txt;
                document.querySelector(".sg").innerHTML=json.suggestion.drsg.brf;
                document.querySelector(".ag").innerHTML=json.suggestion.drsg.txt;
                document.querySelector(".sh1").innerHTML=json.suggestion.cw.brf;
                document.querySelector(".ah").innerHTML=json.suggestion.cw.txt;
                document.querySelector(".sj").innerHTML=json.suggestion.air.brf;
                document.querySelector(".aj").innerHTML=json.suggestion.air.txt;

a

                for( var a= 0; a < 7;a++){
                    document.querySelectorAll(".sa")[a].innerHTML=json.hourly_forecast[a].date;
                    document.querySelectorAll(".sb")[a].innerHTML=json.hourly_forecast[a].tmp+"°C";
                    document.querySelectorAll(".sc")[a].innerHTML=json.hourly_forecast[a].wind.dir;
            }

            }
        }
        xmlhttp.open("GET","https://bird.ioliu.cn/weather?city="+city ,true);
        xmlhttp.send();
    }
    loadXMLDoc()

    document.querySelector("#ipt").addEventListener('change',function () {
        console.log(this.value)
        city = this.value;
        loadXMLDoc()
    })



    //未来七日的天气变化及天气情况
    var li = document.querySelector("#li");
    var span = document.querySelector("#span");




</script>
</body>
</html>